<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script type="text/babel">
    /* 
     state发生改变  props发生改变 render方法就会重新执行
    */
    class App extends React.Component {
        state = {
            num: 1,
            list: [{ name: "张三", age: 18 }, { name: "李四", age: 19 }, { name: "王五", age: 30 }]
        }
        // 判断组件是否要被渲染 当返回值为true时表示渲染该组件当返回值为false表示不渲染该组件
        // nextProps 表示最新props nextState 表示最新state
        shouldComponentUpdate(nextProps, nextState) {
            console.log("状态或props改变时触发")
            console.log(nextState)
            // 普通数据类型直接判断值是否相等
            // if(nextState.num === this.state.num){
            //     return false
            // }
            // 对于引用数据类型单纯的比较值失效 需要进行深对比使用扩展运算符 或者 json.parser(json.stringify);
            if (nextState.list[0].age === this.state.list[0].age) {
                return false
            }
            return true
        }
        render() {

            console.log("渲染....")
            return (
                <div>
                    <h1>{this.state.num}</h1>
                    <button onClick={() => {
                        this.setState({
                            num: 100
                        })
                    }}>点我</button>
                    <ol>
                        {
                            this.state.list.map((item, index) => {
                                return <li key={index}>{item.age}</li>
                            })
                        }
                    </ol>
                    <button onClick={() => {
                        // this.state.list[2] = 100;
                        // let newList = [...this.state.list];
                        // newList[0].age=100
                        let newList = JSON.parse(JSON.stringify(this.state.list))
                        newList[0].age = 100
                        this.setState({
                            list: newList
                        })
                    }}>改变</button>
                    <ul>
                        {
                            this.state.list.map(item => {
                                return <Child key={item.name} user={item} />
                            })
                        }
                    </ul>
                    <button onClick={() => {
                        let newList = JSON.parse(JSON.stringify(this.state.list))
                        newList[0].age = 20
                        this.setState({
                            list: newList
                        })
                    }}>修改</button>
                </div>
            )
        }
    }
    class Child extends React.Component {
        shouldComponentUpdate(nextProps, nextState) {
            if(nextProps.user.age===this.props.user.age){
                return false
            }
            return true
        }
        render() {
            console.log("渲染啦")
            return (
                <li>{this.props.user.name}----{this.props.user.age}</li>
            )
        }
    }
    ReactDOM.render(<App />, document.getElementById("root"))
    // let obj = {
    //     name:"11234"
    // }
    // let obj1 = {
    //     name:"11234"
    // }
    // console.log(obj===obj1)
    // 扩展运算符拷贝一层时是深拷贝拷贝多层时是浅拷贝
    // let obj = {
    //     name:"张三",
    //     user:{
    //         name:"小明"
    //     }
    // }
    // let newObj = {...obj};
    // newObj.name='李四';
    // newObj.user.name='小红'
    // console.log(obj)
</script>

</html>